<template>
	<div class="succeed">
			<div class="header">
				<img src="../assets/rightbut.png">
				<span>支付成功</span>
			</div>
			<div class="content">
				<img src="../assets/cheng.png">
				<p class="shi">支付成功</p>
				<p class="xiang">详细订单信息请在友惠家APP查看</p>
				<a href="http://wap.uhuijia.com.cn/#/invitedownload" class="xia" >下载友惠家</a>
				<div class="liebiao">
					<div><span class="dan1">订单号</span><span class="dan2">{{list.orderNo}}</span></div>
					<div><span class="dan1">下单时间</span><span class="dan2">{{list.createTime}}</span></div>
					<div><span class="dan1">收件人</span><span class="dan2">{{list.reciveName}}</span></div>
					<div><span class="dan1">联系方式</span><span class="dan2">{{list.phone}}</span></div>
					<div><span class="dan1">收货地址</span><span class="dan2">{{list.address}}</span></div>
				</div>
				<p class="ling">京东VIP优惠券任你领</p>
				<p class="shou">快来友惠家手机客户端挑选</p>
				
			</div>
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	export default{
		data(){
			return{
				id:'',
				list:[],
			}
		},
		created(){
			var href = window.location.href;
				console.log(href)
			this.id=href.split('=')[1]
				console.log(this.id)
			var Url = BaseUrl + 'orders/paySuccessDetail?orderNo='+this.id;
			console.log(Url)
			this.$http.get(Url).then(res => {
				console.log(res.data.data);
				if(res.data.code == "10000"){
			   	this.list = res.data.data;
			   }
			},response => {
            	console.log("error");
        	})
		},
		
	}
	
	
</script>

<style scoped="scoped">
	html,body,.succeed{
		width: 100%;
		height: 100%;
		background: #fff;
	}
	.header{
		width: 100%;
		height: 0.9rem;
		display: flex;
		align-items: center;
		padding: 0 0.5rem;
	}
	.header img{
		width: 0.2rem;
		height: 0.3rem;
	}
	.header span{
		margin:  0 auto;
		color: #333333;
		font-size: 0.36rem;
		font-family: "PingFangSC-Medium";
	}
	.content{
		width: 100%;
		text-align: center;
	}
	.content img{
		margin-top: 1rem;
		width: 2rem;
		height: 2rem;
		margin-bottom: 0.6rem;
	}
	.shi{
		width: 100%;
		color: #333333 ;
		font-size: 0.4rem;
		font-family: "PingFangSC-Regular";
		line-height: 0.56rem;
	}
	.xiang{
		width: 100%;
		color: #888888 ;
		font-size: 0.28rem;
		line-height: 0.4rem;
		font-family: "PingFangSC-Regular";
		margin-bottom: 1.11rem;
	}
	.content a{
		height: 0.94rem;
		margin: 0 0.4rem 0.89rem 0.4rem;
		display: block;
		line-height: 0.94rem;
		text-align: center;
		border-radius: 0.1rem;
		font-size: 0.32rem;
	}
	.xia{
		background: #09BB07;
		color: #ffffff;
	}
	.liebiao{
		margin: 0 0.4rem;
		text-align: left;
	}
	.liebiao div{
		width: 100%;
		height: 0.5rem;
	}
	.dan1{
		width: 1.21rem;
		display: inline-block;
		color: #888888;
		font-size: 0.28rem;
		margin-right: 0.23rem;
		float: left;
	}
	.dan2{
		width: 5.22rem;
		color: #333333 ;
		display: inline-block;
		font-size: 0.28rem;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.ling{
		font-size: 0.26rem;
		color: #576B95;
		line-height: 0.37rem;
		margin-top: 1.4rem;
	}
	.shou{
		font-size: 0.26rem;
		color: #576B95;
		line-height: 0.37rem;
		margin-bottom: 0.29rem;
	}
</style>